<template>
  <div>
    <el-form label-width="120px" :model="formData">
      <el-form-item label="Id">
        <el-input v-model="formData.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="formData.text"></el-input>
      </el-form-item>
      <el-form-item label="多人办理规则">
        <el-select v-model="formData.taskType" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审批人">
        <el-input v-model="formData.approver" type="textarea" :rows="5" readonly></el-input>
        <el-button @click="approverSet">设置</el-button>
      </el-form-item>
      <!--       <el-form-item>-->
      <!--        <el-button type="primary" @click="onSubmit">保存</el-button>-->
      <!--      </el-form-item>-->
    </el-form>
    <el-dialog title="设置审批人" :visible.sync="approverSetVisible" append-to-body destroy-on-close
               :before-close="handleClose">
      <el-form :model="approverData" label-width="120px">
        <el-form-item label="审批人类型">
          <el-select v-model="approverData.type" placeholder="请选择">
            <el-option
                v-for="item in approverOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逐级审批层级" v-if="approverData.type=='2'">
          <el-input-number v-model="approverData.level" :min="0" :max="16" label="0 表示顶级"></el-input-number>
        </el-form-item>
        <el-form-item label="部门" v-if="approverData.type=='3'||approverData.type=='4'">
          <el-tree :data="depData" :props="defaultProps"
                   :show-checkbox="true"
                   :check-on-click-node="true"
                   :check-strictly="true" @check="treeCheck"
                   ref="treeForm"
                   node-key="dept_id"
                   :default-expanded-keys="[approverData.dept_id]"
          ></el-tree>
        </el-form-item>
        <el-form-item label="人员" v-if="approverData.type=='5'">
          <el-select v-model="approverData.user_list" placeholder="请选择" clearable multiple value-key="emp_id">
            <el-option
                v-for="item in userOptions"
                :key="item.emp_id"
                :label="item.emp_name"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" v-if="approverData.type=='6'">
          <el-select v-model="approverData.role_list" placeholder="请选择" clearable multiple value-key="role_id">
            <el-option
                v-for="item in roleOptions"
                :key="item.role_id"
                :label="item.role_name"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位" v-if="approverData.type=='7'">
          <el-select v-model="approverData.job_list" placeholder="请选择" clearable multiple value-key="job_id">
            <el-option
                v-for="item in jobOptions"
                :key="item.job_id"
                :label="item.job_name"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位组" v-if="approverData.type=='8'">
          <el-select v-model="approverData.job_group_list" placeholder="请选择" clearable multiple value-key="job_group">
            <el-option
                v-for="item in jobGroupOptions"
                :key="item.job_group"
                :label="item.job_group"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实现类名称" v-if="approverData.type=='9'">
          <el-input v-model="approverData.class_name"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    nodeData: Object,
    lf: Object || String,
  },
  mounted() {
    const {properties, text, id} = this.$props.nodeData
    if (properties) {
      this.$data.formData = Object.assign({}, this.$data.formData, properties)
    }
    if (text && text.value) {
      this.$data.formData.text = text.value
    }
    if (id) {
      this.$data.formData.id = id
    }
  },
  data() {
    return {
      text: '',
      approverSetVisible: false,
      formData: {
        id: '',
        text: '',
        taskType: '',
        approver: ''
      },
      approverData: {
        type: '',
        level: 0,
        dept_id: 0,
        dept_name: '',
        user_list:null,
        role_list:null,
        job_list:null,
        job_group_list:null,
        class_name:''
      },
      options: [{
        value: '1',
        label: '单人办理'
      }, {
        value: '2',
        label: '多人顺序'
      }, {
        value: '3',
        label: '多人任意'
      }, {
        value: '4',
        label: '多人并行'
      }],
      approverOptions: [{
        value: '1',
        label: '发起人部门领导审批'
      }, {
        value: '2',
        label: '发起人部门领导逐级审批'
      }, {
        value: '3',
        label: '指定部门领导审批'
      }, {
        value: '4',
        label: '指定部门所有人审批'
      },
        {
          value: '5',
          label: '指定人员审批'
        },
        {
          value: '6',
          label: '指定角色审批'
        },
        {
          value: '7',
          label: '指定岗位审批'
        },
        {
          value: '8',
          label: '指定岗位组审批'
        },
        {
          value: '9',
          label: '自定义实现类'
        }],
      depData: [{
        dept_name: '2175云',
        dept_id: 1,
        children: [{
          dept_name: '董事会',
          dept_id: 2,
          children: [{
            dept_name: '产品部',
            dept_id: 3,
            children: [{
              dept_name: '前端开发组',
              dept_id: 31,
            },
              {
                dept_name: '后端开发组',
                dept_id: 32,
              },
            ]
          },
            {
              dept_name: '人事部',
              dept_id: 4,
            },
            {
              dept_name: '运营部',
              dept_id: 5,
            },
            {
              dept_name: '财务部',
              dept_id: 6,
            },
          ]
        }
        ]
      }],
      defaultProps: {
        children: 'children',
        label: 'dept_name'
      },
      userOptions:[{emp_id:'SZ000001',emp_name:'张一'},
        {emp_id:'SZ000002',emp_name:'张二'},
        {emp_id:'SZ000003',emp_name:'张三'},{emp_id:'SZ000004',emp_name:'王一'},
        {emp_id:'SZ000005',emp_name:'王二'},{emp_id:'SZ000006',emp_name:'王三'}],
      roleOptions:[{role_id:1,role_name:'系统管理员'},
        {role_id:2,role_name:'企业管理层'},
        {role_id:3,role_name:'薪资专员'},{role_id:4,role_name:'绩效专员'},
        {role_id:5,role_name:'时间管理'},{role_id:6,role_name:'考勤专员'}],
      jobOptions:[{job_id:1,job_name:'总经理'},
        {job_id:2,job_name:'副总经理'},
        {job_id:3,job_name:'产品总监'},{job_id:4,job_name:'产品经理'},
        {job_id:5,job_name:'高级程序员'},{job_id:6,job_name:'后端架构师'}],
      jobGroupOptions:[{job_group:'IT'},
        {job_group:'HRBP'},
        {job_group:'ZPZY'},{job_group:'XZZY'},
        {job_group:'CWJL'},{job_group:'ZFSPGW'}]
    }
  },
  methods: {
    save() {
      const {id} = this.$props.nodeData
      this.$props.lf.setProperties(id, {
        ...this.$data.formData
      });
      this.$props.lf.updateText(id, this.$data.formData.text);
      this.$emit('onClose')
    },
    approverSet() {
      this.approverSetVisible = true
      if (this.formData.approver) {
        let json = JSON.parse(this.formData.approver)
        if (json.type && json.type == "dept") {
          if (json.child && json.child.child_type == "1") {
            this.approverData.type = "1"
          }
          if (json.child && json.child.child_type == "2") {
            this.approverData.type = "2"
            if (json.child.level)
              this.approverData.level = json.child.level
          }
          if (json.child && json.child.child_type == "3") {
            this.approverData.type = "3"
            if (json.child.dept_id && json.child.dept_name)
              this.$refs.treeForm.setCheckedKeys([json.child.dept_id]);
          }
          if (json.child && json.child.child_type == "4") {
            this.approverData.type = "4"
            if (json.child.dept_id && json.child.dept_name)
              this.$refs.treeForm.setCheckedKeys([json.child.dept_id]);
          }
        }
        if (json.type && json.type == "user") {
          if (json.child && json.child.user_list) {
            this.approverData.type = "5"
            this.approverData.user_list=json.child.user_list
          }
        }
        if (json.type && json.type == "role") {
          if (json.child && json.child.role_list) {
            this.approverData.type = "6"
            this.approverData.role_list=json.child.role_list
          }
        }
        if (json.type && json.type == "job") {
          if (json.child && json.child.child_type == "1") {
            this.approverData.type = "7"
            this.approverData.job_list=json.child.job_list
          }
          if (json.child && json.child.child_type == "2") {
            this.approverData.type = "8"
            this.approverData.job_group_list=json.child.job_group_list
          }
        }
        if (json.type && json.type == "cust") {
          if (json.child && json.child.class_name) {
            this.approverData.type = "9"
            this.approverData.class_name=json.child.class_name
          }
        }
      }
    },
    handleClose(done) {
      if (this.approverData.type == "1") {
        let approve = {"type": "dept", "child": {"child_type": "1"}}
        this.formData.approver = JSON.stringify(approve)
      }
      if (this.approverData.type == "2") {
        let approve = {"type": "dept", "child": {"child_type": "2"}}
        approve.child.level = this.approverData.level
        this.formData.approver = JSON.stringify(approve)
      }
      if (this.approverData.type == "3") {
        let approve = {"type": "dept", "child": {"child_type": "3"}}
        approve.child.dept_id = this.approverData.dept_id
        approve.child.dept_name = this.approverData.dept_name
        this.formData.approver = JSON.stringify(approve)
      }
      if (this.approverData.type == "4") {
        let approve = {"type": "dept", "child": {"child_type": "4"}}
        approve.child.dept_id = this.approverData.dept_id
        approve.child.dept_name = this.approverData.dept_name
        this.formData.approver = JSON.stringify(approve)
      }
      if (this.approverData.type == "5") {
        let approve = {"type": "user", "child": {}}
        approve.child.user_list = this.approverData.user_list
        this.formData.approver = JSON.stringify(approve)
      }
      if (this.approverData.type == "6") {
        let approve = {"type": "role", "child": {}}
        approve.child.role_list = this.approverData.role_list
        this.formData.approver = JSON.stringify(approve)
      }
      if (this.approverData.type == "7") {
        let approve = {"type": "job", "child": {"child_type": "1"}}
        approve.child.job_list = this.approverData.job_list
        this.formData.approver = JSON.stringify(approve)
      }
      if (this.approverData.type == "8") {
        let approve = {"type": "job", "child": {"child_type": "2"}}
        approve.child.job_group_list = this.approverData.job_group_list
        this.formData.approver = JSON.stringify(approve)
      }
      if (this.approverData.type == "9") {
        let approve = {"type": "cust", "child": {}}
        approve.child.class_name = this.approverData.class_name
        this.formData.approver = JSON.stringify(approve)
      }
      done()
    },
    handleDepClick(data) {
      this.approverData.dept_id = data.dept_id
      this.approverData.dept_name = data.dept_name
    },
    treeCheck(node, list) {
      if (list.checkedKeys.length == 2) {
        //单选实现
        this.$refs.treeForm.setCheckedKeys([node.dept_id]);
        this.approverData.dept_id = node.dept_id
        this.approverData.dept_name = node.dept_name
      }
      if (list.checkedKeys.length == 1) {
        //单选实现
        this.approverData.dept_id = node.dept_id
        this.approverData.dept_name = node.dept_name
      }
    }
  }
}
</script>
<style scoped>
</style>
